<!--
 * @Description: 资源管理---运维资源---应用目录
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <div class="dataDic" style="height: 480px;background-color: #FFF">
        <el-col :span="13" style="padding:8px 15px;">
            <el-row style="padding: 6px 0">
            <span :key="btnItem.id" v-for="(btnItem,index) in btns" style="margin-left: 8px;">
                  <el-button v-if="btnItem.type==='iconBtn'" @click="btnClick(btnItem)"
                             :icon="btnItem.icon"></el-button>
                    <el-button v-else @click="btnClick(btnItem)"
                               :icon="btnItem.icon">
                        {{btnItem.label}}
                    </el-button>
            </span>
            </el-row>
            <!--        表格-->
            <el-row style="padding-top: 2px;">
                <el-table-ctl @rowClick="rowClick" :dynamic="true" :maxHeight="maxHeight" ref="tableObj" :cols="formCols"></el-table-ctl>
            </el-row>
        </el-col>

        <el-col :span="11" style="background-color: #EDF0F6;height: 480px;padding: 10px 15px;">
            <el-row><span class="panel-title" style="padding-left: 12px;">{{operationLabel}}schma详情</span></el-row>
            <dynamicForm style="background-color: #FFF;padding-top: 12px;" v-if="mode==='editor'" :disabledField="disabledField" ref="dynamicForm"
                         :items="formCols"></dynamicForm>

            <div v-if="mode==='editor'"  class="el-dialog__footer footerBar">
                <button type="button"  @click="closeBtn" class="el-button el-button--primary"><!----><!----><span>关闭</span></button>
                <button type="button"   @click="confirmBtn" class="el-button el-button--primary"><!----><!----><span>确定</span></button>
                <button type="button" @click="cancelBtn" class="el-button el-button--info"><!----><!----><span>取消</span></button>
            </div>

            <dynamicFormList v-if="mode!=='editor'"  :disabledField="disabledField" ref="dynamicForList"
                             :items="formCols"></dynamicFormList>
            <div v-if="mode!=='editor'"  class="el-dialog__footer footerBar">
                <button type="button"  @click="closeBtn" class="el-button el-button--primary"><!----><!----><span>关闭</span></button>
            </div>

        </el-col>

    </div>
</template>

<script>
    import AppDialog from "@/components/AppCommon/AppDialog";
    import elTableCtl from "../../components/el-table-ctl";
    import dynamicForm from "@/views/devOpsResource/components/dynamicForm";
    import dynamicFormList from "@/views/devOpsResource/components/dynamicFormList";
    import crudMixin from '@/mixins/crudMixin.js';
    import {_changeDbRecordToJson,changeDbFieldToJson,_changToAddDomain, _getFieldFromDb,extendFields} from '../../data/domainCols.js';
    import enumData from "../../data/enum";
    import { Loading } from 'element-ui';
    import cols,{changeFirstCharToLow} from "../../data/domainCols";
    let loadingInstance=null;

    export default {
        name: "schemaMg",
        mixins: [crudMixin],
        components: {
            AppDialog,
            elTableCtl,
            dynamicForm,
            dynamicFormList,
        },
        computed: {
            queryParams() {
                //1 表示schema类型
                return {
                    id: this.curResourceId,
                };
            }
        },
        props:{
            curResourceName:{type:String,default:''},//当前资源的名字
            curResourceId:{type:[String,Number],default:''},//当前资源的id
        },
        data() {
            return {
                formCols:[],
                tabType: enumData.schema,//资源类型
                operationLabel:"",
                curRecordId:"",//当前记录id
                curType:8,//
                mode: "list",
                resourceTypeValue: "",
                dictionaryName: "",
                dictionaryCode: "",
                disabledField: [],
                maxHeight: 360,
                searchName: ''
            }
        },
        created() {
        },
        beforeMount() {
            this.getDbField();
        },
        mounted() {
            //查询列表数据
            if(this.curResourceId!=null&&this.curResourceId!==""){
                this.$refs.tableObj.setQueryParams({id: this.curResourceId});
                //加载数据
                this.searchGridByCondition();
            }
        },
        watch: {
            curResourceId(newVal){
                if(newVal!=null&&newVal!==""){
                    this.$refs.tableObj.setQueryParams({id: newVal});
                    //加载数据
                    this.searchGridByCondition();
                }
            }
        },
        methods: {
            //根据资源类型动态获取列数据信息
            getDbField() {
                let formCols=[];
                cols&&cols.forEach((itemObj) => {
                    formCols.push({...itemObj});
                });
                loadingInstance = Loading.service({text:"加载中"});
                this.api.getDbField({params: {type: this.tabType}}, {method: "get", customRequest: true})
                    .then(res => {
                        _getFieldFromDb(res["data"], formCols,[]);
                        if(formCols!=null){
                            this.formCols=formCols;
                        }
                        loadingInstance.close();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //记录点击
            rowClick({row}){
                this.mode = "list";
                this.operationLabel="查看";
                this.loadRecord(row["id"]);
            },
            //查询列表信息
            searchGridByCondition() {
                //查询列表数据
                loadingInstance = Loading.service({text:"加载中"});
                //刷新了数据 要清空form列表的值
                this.clearFormData();
                this.$refs.tableObj.flushGridByUrl("commonTenantResourceSchema", {
                    method: "get", customRequest: true, dataFun: (list) => {
                        let recordJsonAry = [];
                        list.forEach((itemObj, index) => {
                            recordJsonAry.push(_changeDbRecordToJson(itemObj["commonTenantResource"]));
                        });
                        loadingInstance&&loadingInstance.close();
                        return recordJsonAry;
                    }
                }, {});
            },
            //点击关闭按钮
            closeBtn(){
                this.$emit('closeWin',{})
            },
            //添加事件
            addEvent: function (eventNode, funName, eventFun) {
                if (eventNode != null && typeof eventNode == 'object') {
                    if (eventNode.attachEvent) {
                        if (funName != null && funName.indexOf("on") < 0) {
                            funName = "on" + changeFirstCharToLow(funName);
                        }
                        eventNode.attachEvent(funName, eventFun);
                    }
                    else if (eventNode.addEventListener) {
                        eventNode.addEventListener(funName, eventFun, false);
                    }
                }
            },
            flush(){
                this.$refs.tableObj.reloadData();
                this.$emit("flush","");
                this.cancelBtn();
            },
            //取消schema的新增或者修改
            cancelBtn(){
                this.mode="list";
                this.operationLabel="查看";
            },
            //点击确定按钮
            confirmBtn(){
                if (this.curRecordId != null && this.curRecordId !== "") {
                    this.modRecordToDb();
                } else {
                    //校验数据
                    if(this.$refs.dynamicForm.validate()){
                        this.confirmOk&&this.confirmOk();
                    }
                }
            },
           //清空form列表的值
            clearFormData(){
                //清空以前的值
                this.formCols.forEach((itemObj)=>{
                    itemObj["value"]="";
                })
            },
            //增加前的方法
            beforeAdd() {
                this.operationLabel="新增";
                this.mode = "editor";
                this.curRecordId = null;
               this.clearFormData();
            },
            //修改的前置方法
            beforeMod() {
                this.operationLabel="修改";
                this.mode = "editor";
            },
            //修改前加载数据
            loadRecord(id) {
                this.api.getCommonTenantResourceById({params: {id}}, {method: "get", customRequest: true})
                    .then(res => {
                        changeDbFieldToJson.call(this, res);
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //删除操作
            delOk(ids) {
                var params={ids:[ids]};
                this.api.deleteResourceById(params)
                    .then(res => {
                        this.$refs.tableObj.reloadData();
                        this.formCols.forEach((itemObj)=>{
                            itemObj["value"]="";
                        })
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //添加操作
            confirmOk() {
                if (this.curRecordId != null && this.curRecordId !== "") {
                    this.modRecordToDb();
                } else {
                    this.addRecordToDb();
                }
            },
            //添加到数据库
            addRecordToDb() {
                let domain = _changToAddDomain(this.formCols,this.curType);
                domain["resourceType"]=this.curType;//当前资源类型
                domain["resourceFeature"] = this.curResourceId;//资源数据库id
                this.api.addSchema(domain)
                    .then(res => {
                        this.mode="list";
                        this.operationLabel="查看";
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //修改数据库记录
            modRecordToDb() {
                let domain =  _changToAddDomain(this.formCols, this.tabType);
                domain["resourceType"]=this.curType;
                 domain["id"] = this.curRecordId;
                this.api.updateResource(domain)
                    .then(res => {
                        this.mode="list";
                        this.operationLabel="查看";
                        this.curRecordId = null;
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            }
        }
    };
</script>
<style>
    .panel-title {
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(50, 69, 88, 1);
        line-height: 17px;
        margin-bottom: 10px;
        display: inline-block;
    }
</style>